<template>
  <div>
    <h1>组件传值：props</h1>
    <div>
      {{ fTitle }}
      <hr />
      <StuDemo1 :title="'子组件标题'" :descript="des"></StuDemo1>
      <hr />
      <StuDemo3 :title="`SonDemo3子组件的标题`" :des="sd3Des" :propH="sd3PropsFunc"></StuDemo3>
      <hr />
      <StuDemo2 title="SonDemo2子组件的标题" :propH="sd3PropsFunc" :des="sd2Des"></StuDemo2>
      <hr />
      <StuDemo4 msg="TSX！"></StuDemo4>
      <hr />
      <StuDemo5 msg="JSX！"></StuDemo5>
      <hr />
      <SonDemo6 msg="举杯邀明月，对影成三人"></SonDemo6>
      <hr />
      <SonDemo7 title="大家好！" msg="欢迎加入程序员队列" :user="user"></SonDemo7>
      <hr />
      <SonDemo8 :user="user" msg="666"></SonDemo8>
      <hr />
      <SonDemo9 v-for="item in userArr" :key="item.id" :user="item"></SonDemo9>
    </div>
  </div>
</template>

<script setup lang="ts">
import StuDemo1 from './components/StuDemo1.vue'
import StuDemo2 from './components/StuDemo2.vue'
import StuDemo3 from './components/StuDemo3.vue'
import StuDemo4 from './components/StuDemo4.vue'
import StuDemo5 from './components/StuDemo5'
import SonDemo6 from './components/SonDemo6.vue'
import SonDemo7 from './components/SonDemo7.vue'
import SonDemo8 from './components/SonDemo8.vue'
import SonDemo9 from './components/SonDemo9.vue'

import { type Iuser } from './components/SonDemo7.vue'
import { ref } from 'vue'

const fTitle = ref('')
const des = 9999
const sd3Des = ref('主组件传入的des')
const sd2Des = ref('主组件传入的des')
const sd3PropsFunc = (sonTitle: string, fn: Function) => {
  fTitle.value = sonTitle
  fn()
  console.log('父组件函数，传入子组件使用')
}

const user = ref<Iuser>({
  id: 1,
  name: '张三',
  sex: '男',
  age: 23
})

const userArr = ref<Iuser[]>([
  { id: 1, name: '小明', sex: '男', age: 23 },
  { id: 2, name: '小两', sex: '男', age: 22 },
  { id: 3, name: '小红', sex: '女', age: 18 }
])
</script>

<style></style>
